<template>
    <div class="container">
        <div style="display: flex;">
            <div style="padding-right: 10px;cursor: pointer;" @click="handleReturn"><el-icon>
                    <ArrowLeftBold style="margin-top: 18px;" />
                </el-icon></div>
            <div class="title mb-4">质量检验表</div>
        </div>
        <!-- 查询表单区域 -->
        <div class="border-bottom">
            <el-form :model="formModel" ref="queryForm" label-width="100px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="日期" prop="date">
                            <el-date-picker v-model="formModel.date" type="date" placeholder="选择日期" clearable
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="子公司" prop="subsidiary">
                            <xcmg-select v-model="formModel.subsidiary" placeholder="请选择子公司" clearable>
                                <xcmg-option v-for="item in subsidiaryOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </xcmg-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="设计分类" prop="design">
                            <xcmg-select v-model="formModel.design" placeholder="请选择设计分类" clearable>
                                <xcmg-option v-for="item in designOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </xcmg-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="物料类型" prop="materialType">
                            <xcmg-select v-model="formModel.materialType" placeholder="请选择物料类型" clearable>
                                <xcmg-option v-for="item in materialTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </xcmg-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item class="form-action" label-width="0">
                            <xcmg-button stoke @click="handleSearch">查询</xcmg-button>
                            <xcmg-button @click="resetForm" class="action-button-spacer">重置</xcmg-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 数据统计 -->
        <!-- <div class="statistics-container">
            <el-row :gutter="20" class="stats-row">
                <el-col :span="4.8">
                    <div class="statistic-card">
                        <div class="statistic-content">
                            <div class="statistic-img">
                                <img class="statistic-image" src="@/assets/images/order.png" alt="订单">
                            </div>
                            <el-statistic :value="statistics.totalMaterial">
                                <template #title>
                                    <div class="statistic-title">
                                        物料校验数量
                                    </div>
                                </template>
                            </el-statistic>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4.8">
                    <div class="statistic-card">
                        <div class="statistic-content">
                            <div class="statistic-img">
                                <img class="statistic-image" src="@/assets/images/abnormal.png" alt="异常">
                            </div>
                            <el-statistic class="abnormal" :value="statistics.abnormalCount">
                                <template #title>
                                    <div class="statistic-title">
                                        物料重复数量
                                    </div>
                                </template>
                            </el-statistic>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4.8">
                    <div class="statistic-card">
                        <div class="statistic-content">
                            <div class="statistic-img">
                                <img class="statistic-image" src="@/assets/images/repeat.png" alt="重复">
                            </div>
                            <el-statistic class="repeat" :value="statistics.repeatCount">
                                <template #title>
                                    <div class="statistic-title">
                                        属性规范数量
                                    </div>
                                </template>
                            </el-statistic>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4.8">
                    <div class="statistic-card">
                        <div class="statistic-content">
                            <div class="statistic-img">
                                <img class="statistic-image" src="@/assets/images/procedure.png" alt="流程">
                            </div>
                            <el-statistic class="procedure" :value="statistics.inProcessCount">
                                <template #title>
                                    <div class="statistic-title">
                                        物料重复率
                                    </div>
                                </template>
                            </el-statistic>
                        </div>
                    </div>
                </el-col>
                <el-col :span="4.8">
                    <div class="statistic-card">
                        <div class="statistic-content">
                            <div class="statistic-img">
                                <img class="statistic-image-small" src="@/assets/images/accomplish.png" alt="已完成">
                            </div>
                            <el-statistic class="accomplish" :value="statistics.completedCount">
                                <template #title>
                                    <div class="statistic-title">
                                        属性规范率
                                    </div>
                                </template>
                            </el-statistic>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div> -->
        <!-- 数据表格区域 -->
        <div class="table-container">
            <xcmg-table :data="tableData" v-loading="loading" height="100%" style="width: 100%" border>
                <el-table-column type="index" label="序号" align="center" width="60">
                    <template #default="scope">
                        <el-link type="primary" @click="handleSkip(scope.row)">{{ scope.$index + 1 }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="designCategory" label="设计分类" show-overflow-tooltip />
                <el-table-column prop="materialType" label="物料类型" show-overflow-tooltip />
                <el-table-column prop="materialName" label="物料名称" show-overflow-tooltip />
                <el-table-column prop="materialDesc" label="物料描述" show-overflow-tooltip />
                <el-table-column prop="basicAttr" label="其它基础属性" show-overflow-tooltip />
                <el-table-column prop="categoryAttr" label="分类属性" show-overflow-tooltip />
            </xcmg-table>
        </div>
        <div class="fixed-pagination">
            <xcmg-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 50, 100, 200, 500]" :total="total" background
                layout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router' // 引入路由
import { ArrowLeftBold } from '@element-plus/icons-vue'

const router = useRouter() // 获取路由实例
const loading = ref(false)

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const formModel = reactive({
    date: '',
    subsidiary: '',
    design: '',
    materialType: ''
})

// 统计数据结构
const statistics = reactive({
    totalMaterial: 1526,
    abnormalCount: 138,
    repeatCount: 67,
    inProcessCount: 342,
    completedCount: 879,
    correctionRate: 92.5
})

// 模拟表格数据
const tableData = ref([
    { designCategory: '结构件', materialType: '金属', materialName: '不锈钢板', materialDesc: '304不锈钢板', basicAttr: '耐腐蚀', categoryAttr: '原材料' },
    { designCategory: '电子元件', materialType: '半导体', materialName: 'IC芯片', materialDesc: 'ARM Cortex-M4', basicAttr: '低功耗', categoryAttr: '核心部件' },
    { designCategory: '包装材料', materialType: '纸质', materialName: '瓦楞纸箱', materialDesc: '三层瓦楞纸箱', basicAttr: '抗压', categoryAttr: '包装' },
    { designCategory: '液压系统', materialType: '密封件', materialName: 'O型密封圈', materialDesc: '耐油橡胶', basicAttr: '耐高温', categoryAttr: '密封' },
    { designCategory: '电气系统', materialType: '线缆', materialName: '屏蔽电缆', materialDesc: '双绞屏蔽电缆', basicAttr: '抗干扰', categoryAttr: '连接件' },
    { designCategory: '传动部件', materialType: '轴承', materialName: '深沟球轴承', materialDesc: '6205-2RS', basicAttr: '高速', categoryAttr: '转动件' },
    { designCategory: '结构件', materialType: '塑料', materialName: 'ABS工程塑料', materialDesc: '阻燃级', basicAttr: '高强度', categoryAttr: '外壳' }
])

// 选项数据
const subsidiaryOptions = [
    { value: 'sub1', label: '徐州重工' },
    { value: 'sub2', label: '上海机械' },
    { value: 'sub3', label: '北京分公司' }
]

const designOptions = [
    { value: 'design1', label: '机械设计' },
    { value: 'design2', label: '电子设计' },
    { value: 'design3', label: '结构设计' }
]

const materialTypeOptions = [
    { value: 'metal', label: '金属材料' },
    { value: 'plastic', label: '塑料制品' },
    { value: 'electronic', label: '电子元件' },
    { value: 'packing', label: '包装材料' }
]

const handleSkip = (row: any) => {
    console.log('点击了行数据:', row)

    router.push({
        path: '/qualityTestDetails',
        query: {
            designCategory: row.designCategory,
            materialType: row.materialType,
            materialName: row.materialName

        }
    })
}

// 分页变化处理
const handleSizeChange = (size: number) => {
    pageSize.value = size
    fetchTableData()
}

const handleCurrentChange = (page: number) => {
    currentPage.value = page
    fetchTableData()
}

// 返回上一页
const handleReturn = () => {
    router.go(-1) // 返回上一页路由
}

// 查询操作
const handleSearch = () => {
    loading.value = true
    // 模拟查询延迟
    setTimeout(() => {
        loading.value = false
        // 这里实际应调用API
        console.log('查询参数:', formModel)
    }, 800)
}

// 重置表单
const resetForm = () => {
    formModel.date = ''
    formModel.subsidiary = ''
    formModel.design = ''
    formModel.materialType = ''
}

// 获取表格数据
const fetchTableData = async () => {
    try {
        loading.value = true
        // 模拟API请求
        await new Promise(resolve => setTimeout(resolve, 1000))

        // total.value = res.total || 0
    } catch (error) {
        console.error('获取数据失败:', error)
        total.value = 0
    } finally {
        loading.value = false
    }
}

// 初始化数据
onMounted(() => {
    fetchTableData()
})
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  height: calc(100vh - 64px - 56px - 40px);
  display: flex;
  flex-direction: column;
}

.title {
  font-weight: bold;
  font-size: 20px;
}

.mb-4 {
  margin-bottom: 16px;
}

.border-bottom {
  border-bottom: 1px solid #e5e7eb;
}


/* 表格容器：占据剩余空间 */
.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 表格：允许滚动，限制最大高度 */

.fixed-pagination {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  z-index: 1;
}

:deep(.el-form-item__content) {
    justify-content: flex-end;
}
</style>